var num = 1,
	OTI = true,
	fullscreen,
	outerScrollObj,
	activeSlide = 0,
	innerScrollObjs,
	pullToRefreshObjs,
	contentOffsetTop = 80,
	sliderControllHeight = 38,
	scrollAndPullToRefreshInit = false,
	innerScroll = '.inner>.mui-scroll',
	fullDiv = document.createElement('div'),
	outerWrapper = '.mui-scroll-wrapper.outer',
	innerWrapper = '.mui-scroll-wrapper.inner',
	outerTopHeight = document.querySelector("#outerTopBox") ? document.querySelector("#outerTopBox").clientHeight : 0,
	navBarTabHeight = document.querySelector('nav.mui-bar-tab') ? document.querySelector('nav.mui-bar-tab').clientHeight : 0,
	scrollOption = {
		scrollY: true,
		scrollX: false,
		bounce: true, // 开启回弹动画
		indicators: false, //是否显示滚动条
		deceleration: 0.0006
	};

if (mui.os.ios) {
	scrollOption.deceleration = 0.003;
}

// 初始化页面的 滚动 和 上拉加载
function initScrollAndPullToRefresh() {
	fullDiv.setAttribute('style', 'position: fixed; bottom: 0; left: 0; top: 0;');
	fullDiv.setAttribute('id', 'fullH');
	document.body.appendChild(fullDiv);
	
	var hh = '';
	fullscreen = fullDiv.clientHeight - contentOffsetTop;
	mui.each(document.querySelectorAll(innerWrapper), function(i, ele) {
		ele.style.height = (fullscreen - sliderControllHeight - navBarTabHeight) + 'px';
		hh += ele.style.height + ',';
	});
	
	console.log("fullscreen client height -> " + fullDiv.clientHeight);
	console.log("slider controll height -> " + sliderControllHeight);
	console.log("content offset top -> " + contentOffsetTop);
	console.log("nav bar tab height -> " + navBarTabHeight);
	console.log("outer top height -> " + outerTopHeight);
	console.log("fullscreen -> " + fullscreen);
	console.log("hh -> " + hh);
	if (document.querySelector('#brf')) {
		var d1 = document.createElement('div');
		d1.innerHTML = 'fullscreen client height -> ' + fullDiv.clientHeight + '<br>' +
					   "slider controll height -> " + sliderControllHeight + '<br>' +
					   "content offset top -> " + contentOffsetTop + '<br>' +
					   "nav bar tab height -> " + navBarTabHeight + '<br>' +
					   "outer top height -> " + outerTopHeight + '<br>' +
					   "fullscreen -> " + fullscreen + '<br>' +
					   "hh -> " + hh;
		document.querySelector('#brf').appendChild(d1);
	}
	
	// 初始化内部上拉加载
	pullToRefreshObjs = mui(innerScroll).pullToRefresh({
		up: {
			height: 50, 						//可选.默认50.触发上拉加载拖动距离
			auto: false, 						//可选,默认false.自动上拉加载一次
			contentrefresh: "正在加载...", 		//可选，正在加载状态时，上拉加载控件上显示的标题内容
			contentnomore: '没有更多数据了', 		//可选，请求完毕若没有更多数据时显示的提醒内容；
			callback: function() { 				//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				loadData();
			}
		}
	});
	
	// 初始化内部滚动
	innerScrollObjs = mui(innerWrapper).scroll(scrollOption); 
	for (var i in innerScrollObjs) {
		innerScrollObjs[i].ITO = false;
	}
	
	// 初始化外部滚动
	scrollOption.bounce = false;
	outerScrollObj = mui(outerWrapper).scroll(scrollOption);
	
	changeInnerEventListner('remove');

	// 添加外部区域滚动事件监听
	document.querySelector(outerWrapper).addEventListener('scroll', outerToInner, false);
	
	scrollAndPullToRefreshInit = true;
}

function outerToInner() {
	document.querySelector('#outerY')? document.querySelector('#outerY').innerHTML = 'outerY：' + outerScrollObj.y : '';
	if (OTI && outerScrollObj.y <= (0 - outerTopHeight)) {
		// outerScroll.scrollTo(0, -200, 100);
		changeOuterEventListner('remove');

		changeInnerEventListner('add');

		changeIOScrollListner("OTI");
	}
}

function innerToOuter() {
	document.querySelector('#innerY')? document.querySelector('#innerY').innerHTML = 'innerY' + activeSlide + '：' + innerScrollObjs[activeSlide].y : '';
	if (innerScrollObjs[activeSlide].ITO && innerScrollObjs[activeSlide].y >= 0) {
		// innerScroll.scrollTo(0, 0, 100);
		changeInnerEventListner('remove');

		changeOuterEventListner('add');

		changeIOScrollListner("ITO");
	}
}

// 添加 或 取消 内部滚动区域 滚动监听 和 上拉加载监听
function changeInnerEventListner(type) {
	if ('add' == type) {
		// 添加内部 滚动 和 推拽 的监听
		document.querySelectorAll(innerWrapper)[activeSlide].addEventListener('drag', innerScrollObjs[activeSlide]);
		window.addEventListener('scroll', innerScrollObjs[activeSlide]);

		// 添加内部上拉加载有关的 上拉拖拽 和 滚动 监听
		document.querySelectorAll(innerScroll)[activeSlide].addEventListener('dragup', pullToRefreshObjs[activeSlide]);
		window.addEventListener('scroll', pullToRefreshObjs[activeSlide]);
	} else if ('remove' == type) {
		// 取消内部 滚动 和 推拽 的监听
		document.querySelectorAll(innerWrapper)[activeSlide].removeEventListener('drag', innerScrollObjs[activeSlide]);
		window.removeEventListener('scroll', innerScrollObjs[activeSlide]);

		// 取消内部上拉加载有关的 上拉拖拽 和 滚动 监听
		document.querySelectorAll(innerScroll)[activeSlide].removeEventListener('dragup', pullToRefreshObjs[activeSlide]);
		window.removeEventListener('scroll', pullToRefreshObjs[activeSlide]);
	}
}

// 添加 或 取消 外部滚动区域 滚动监听
function changeOuterEventListner(type) {
	if ('add' == type) {
		document.querySelector(outerWrapper).addEventListener('drag', outerScrollObj);
		window.addEventListener('scroll', outerScrollObj);
	} else if ('remove' == type) {
		document.querySelector(outerWrapper).removeEventListener('drag', outerScrollObj);
		window.removeEventListener('scroll', outerScrollObj);
	}
}

// 切换内部外部滚动监听
function changeIOScrollListner(type) {
	if ('ITO' == type) {
		OTI = true;
		innerScrollObjs[activeSlide].ITO = false;
		setTimeout(function() {
			document.querySelectorAll(innerWrapper)[activeSlide].removeEventListener('scroll', innerToOuter,
				false);
			document.querySelector(outerWrapper).addEventListener('scroll', outerToInner, false);
			// innerScrollObjs[activeSlide].scrollListner = false;
		}, 1);
	} else if ('OTI' == type) {
		OTI = false;
		innerScrollObjs[activeSlide].ITO = true;
		setTimeout(function() {
			document.querySelector(outerWrapper).removeEventListener('scroll', outerToInner, false);
			document.querySelectorAll(innerWrapper)[activeSlide].addEventListener('scroll', innerToOuter,
			false);
			// innerScrollObjs[activeSlide].scrollListner = true;
		}, 1);
	}
}

// slider内容区 滚动 与 上拉 监听刷新
function refreshSlideScrollAndPullUp() {
	// 外部滚动到极限  内部未进行 滚动 和 上拉 监听
	if (!OTI && !innerScrollObjs[activeSlide].ITO) {
		// 添加内部 滚动 和 上拉 监听
		changeInnerEventListner('add');
		innerScrollObjs[activeSlide].ITO = true;
		document.querySelectorAll(innerWrapper)[activeSlide].addEventListener('scroll', innerToOuter, false);
	}

	// 外部仍可滚动 内部存在 滚动 和 上拉 监听
	if (OTI) {
		// 移除内部 滚动 和 上拉 监听
		changeInnerEventListner('remove');
		innerScrollObjs[activeSlide].ITO = false;
		document.querySelectorAll(innerWrapper)[activeSlide].removeEventListener('scroll', innerToOuter, false);
	}
}

// 获取当前显示的slider
function getActiveSlideScroll() {
	return pullToRefreshObjs[activeSlide].element;
}

// 结束 或 继续上拉加载
function endPullUpToRefresh(activeScroll, flag) {
	mui(activeScroll).pullToRefresh().endPullUpToRefresh(flag);
}

// 重启上拉加载
function pullRefresh(activeScroll) {
	mui(activeScroll).pullToRefresh().refresh(true);
}

// 刷新外部滚动区上部高度
function refreshOuterTopHeight(ele) {
	if (ele) {
		outerTopHeight = document.querySelector(ele).clientHeight;
	} else {
		outerTopHeight = document.querySelector("#outerTopBox") ? document.querySelector("#outerTopBox").clientHeight : 0;
	}
}